$(function () {
    //渲染数据
    getapi()
    
   //获取友情链接数据
    function getapi() {
        //发送ajax请求
        $.ajax({
            type: 'get',
            url: '/admin/links',
            success(res) {
                if (res.status !== 0) {
                    return layui.layer.msg(res.message ,{icon :5})
                }
       console.log(res);
                const htmlStr = template('tpl-get', res)
                // console.log(htmlStr);
                //添加到页面
                $('tbody').html(htmlStr)
            }
        })
    }


  //添加链接
    var indexAdd = null
    $('#add-link').on('click', function () {
     //获取到添加模板
   indexAdd =  layui.layer.open({
        type: 1,
        title: '添加链接',
        area: ['600px', '400px'],
        //把表单内容添加到模态框
        content : $('#add-form-tpl').html()
        
  })
    })
    
//点击上传文件弹出文件框
    var fd = null
$('body').on('click', '#urlIcon' ,function () {
    $('#linkFilel').click()
    
})
$('body').on('change','#linkFilel' ,function () {

    var fileLes = $('#linkFilel')[0].files
   var  files = fileLes[0]
    var newImgURL = URL.createObjectURL(files)
    console.log(fileLes[0]);
    //转换为form对象
     fd = new FormData($('#add-form')[0])
    // fd.append('linkicon', fileLes[0])
    fd.forEach(function (value, index) {
        console.log(value,index);
    })
    $('#preIcon').attr('src' , newImgURL)
})
$('body').on('submit', '#add-form',function (e) {
    //阻止默认提交事件
    e.preventDefault()
//    发送ajax请求 提交到服务器
    $.ajax({
        type: 'post',
        url: '/admin/links',
        data: fd ,
        processData: false,
        contentType : false,
        success(res) {
            if (res.status !== 0) {
               return layui.layer.msg(res.message ,{icon :5})
            }
            layui.layer.msg(res.message, { icon: 6 })
            //关闭模态框
            layui.layer.close(indexAdd)
            getapi()
        }
    })
})
  
  
       
  //删除
    $('body').on('click', '#delete', function () {
        var id = $(this).attr('data-id')
       //发送ajax请求
       layui.layer.confirm('确定要删除此分类吗？', {
        icon: 3, title: '提示',
       }, function () {
        $.ajax({
            type: 'delete',
            url: '/admin/links/' + id,
            success(res) {
                if (res.status !== 0) {
                    return layui.layer.msg(res.message ,{icon :5})
                }
                layui.layer.msg(res.message ,{icon :6})
                getapi()
            }
        })
    })
     
    })


    //编辑链接
    var file = null
    $('body').on('click', '.edit', function () {
        
        indexAdd =  layui.layer.open({
            type: 1,
            title: '编辑链接',
            area: ['600px', '400px'],
            //把表单内容添加到模态框
            content : $('#edit-form-tpl').html()
            
        })
        //获取到id
        var id = $(this).attr('data-id')
      
        // console.log(id);
       
        //发送ajax请求数据
        $.ajax({
            type: 'get',
            url: '/admin/links/' + id,
            success(res) {
                if (res.status !== 0) {
                    return layui.layer.msg(res.message ,{icon :5})
                }
                //渲染到表单
                console.log(res.data);
                $('#preIcon').attr('src', 'http://localhost:8888/uploads/' + res.data.linkicon)
              
                layui.form.val('editForm', res.data)
                file = res.data.linkicon
               localStorage.setItem('id' , res.data.id)
            }
          
        })
    })

  //提交
  
    // var id = localStorage.getItem('id')
    $('body').on('click', '#urlIcon' ,function () {
        $('#linkFile').click()
        
    })
    $('body').on('change', '#linkFile', function () {
         var fileLes = $('#linkFile')[0].files
         file = fileLes[0]
         var newImgURL = URL.createObjectURL(file)
         console.log(fileLes[0]);
         //转换为form对象
    
         $('#preIcon').attr('src' , newImgURL)
    })




  //注册表单事件
    $('body').on('submit', '#edit-form', function (e) {
         //  阻止默认提交事件
        e.preventDefault()
        let fd = new FormData($('#edit-form')[0])
        fd.append('linkicon' , file)
        // fd.forEach(function (index, value) {
        //     console.log(index,value);
        // })
        
        // 发送ajax请求 提交到服务器
         $.ajax({
             type: 'put',
             url: '/admin/links/' +  localStorage.getItem('id'),
             data: fd ,
             processData: false,
             contentType : false,
             success(res) {
                 if (res.status !== 0) {
                    return layui.layer.msg(res.message ,{icon :5})
                 }
                 layui.layer.msg(res.message, { icon: 6 })
                 //关闭模态框
                 layui.layer.close(indexAdd)
                 getapi()
             }
         })
     })
    

    // 重置按钮
    $('body').on('click', '#btnn', function () {
        var id = localStorage.getItem('id')
        $.ajax({
            type: 'get',
            url: '/admin/links/' + id,
            success(res) {
                if (res.status !== 0) {
                    return layui.layer.msg(res.message ,{icon :5})
                }
                //渲染到表单
                console.log(res.data);
                $('#preIcon').attr('src', 'http://localhost:8888/uploads/' + res.data.linkicon)
              
                layui.form.val('editForm', res.data)
               
            }
          
        })

    })
})